import React from "react";
import { Tooltip } from "antd";
import "./style.less";
import { Icons } from "@/utils/icons";

interface InfoTooltipIconProps {
  titleContent?: React.ReactNode; // 标题内容，可选
  mainContent?: React.ReactNode; // 主体内容，可选
  extraContent?: React.ReactNode; // 额外内容，可选
  children?: React.ReactNode; // 支持自定义内容
  icon?: React.ReactNode; // 动态传入的图标
  tooltipWidth?: string | number; // Tooltip 宽度
  iconColor?: string; // 问号图标的颜色
}

const InfoTooltipIcon: React.FC<InfoTooltipIconProps> = ({
  titleContent,
  mainContent,
  extraContent,
  icon,
  tooltipWidth,
  iconColor = "#rgba(18, 18, 18, 0.7)", // 默认颜色为蓝色
}) => {
  const title = (
    <div
      className="info-tooltip-content"
      style={{ maxWidth: tooltipWidth || "auto" }} // 确保父级宽度正确
    >
      {titleContent && (
        <div className="info-tooltip-header">
          <span className="info-tooltip-icon">
            {icon || <Icons.Icon1 width={20} height={20} />}
          </span>
          <span className="info-tooltip-title">{titleContent}</span>
        </div>
      )}
      {mainContent && <div className="info-tooltip-body">{mainContent}</div>}
      {extraContent && (
        <div className="info-tooltip-footer">{extraContent}</div>
      )}
    </div>
  );
  return (
    <Tooltip
      title={title}
      color="#373D4C"
      arrow={false}
      placement="bottomLeft"
      overlayStyle={{ maxWidth: tooltipWidth || "auto" }} // 设置 Tooltip 父级宽度
      rootClassName="info-tooltip"
    >
      <div className="info-tooltip-icon hover-blue">
        <Icons.Info width={16} height={16} fill={iconColor} />
      </div>
    </Tooltip>
  );
};

export default InfoTooltipIcon;
